var elementCtrl = {
	findParent: function(el, tag){
		while(el && el.tagName != tag){
			el = el.parentNode;
		}
		return el;
	},
	movePre: function(el){
		var parent = el.parentNode;
		var els = parent.children;
		var beforeElement = null;
		for (var i = 0, l = els.length; i < l; i++) {
			if (el === els[i]) {
				break;
			} else {
				beforeElement = els[i];
			}
		}
		parent.insertBefore(el, beforeElement);
	},
	moveNext: function(el){
		var parent = el.parentNode;
		var els = parent.children;
		var beforeElement = null;
		for (var i = els.length; i > -1; i--) {
			if (el === els[i]) {
				break;
			} else {
				beforeElement = els[i + 1];
			}
		}
		if (beforeElement) {
			parent.insertBefore(el, beforeElement);
		} else {
			parent.appendChild(el);
		}
	}
};
var tableCtrl = {
	removeRow: function(el){
		var row = elementCtrl.findParent(el, 'TR');
		var table = elementCtrl.findParent(el, 'TABLE');
		table.deleteRow(row.rowIndex);
	},
	insertRow: function(datas, table){
		for (var i = 0, l = datas.length; i < l; i++) {
			var
				data = datas[i],
				category = data['category'],
				title = data['title'],
				price = data['price'],
				count = data['count']
			;
			var row = document.createElement('tr');
			row.insertCell(0).innerHTML = title;
			row.insertCell(1).innerHTML = price;
			row.insertCell(2).innerHTML = count;
			row.insertCell(3).innerHTML = parseInt(price) * parseInt(count);
			row.insertCell(4).innerHTML = [
				'<button type="button" onclick="tableCtrl.removeRow(this);">삭제</button>',
				'<button type="button" onclick="tableCtrl.upRow(this);">▲</button>',
				'<button type="button" onclick="tableCtrl.downRow(this);">▼</button>'
			].join('');
			var cell = tableCtrl.getContainCell(category, table, 0);
			if (cell) {
				var beforeRow = elementCtrl.findParent(cell, 'TR');
				table.insertBefore(row, table.rows[beforeRow.rowIndex 
						+ cell.rowSpan - 1]);
				cell.rowSpan++;
			} else {
				row.insertCell(0).innerHTML = category;
				table.appendChild(row);
			}
		}
	},
	upRow: function(el){
		var row = elementCtrl.findParent(el, 'TR');
		elementCtrl.movePre(row);
	},
	downRow: function(el){
		var row = elementCtrl.findParent(el, 'TR');
		elementCtrl.moveNext(row);
	},
	getCellSum: function(table, colIndex){
		var sum = 0;
		var rows = table.rows;
		for (var i = 0, l = rows.length; i < l; i++) {
			var val = rows[i].cells[colIndex].innerHTML;
			sum += parseInt(val);
		}
		return sum;
	},
	getContainCell: function(sData, table, cellIndex){
		var rows = table.rows;
		for (var i = 0, l = rows.length; i < l; i++) {
			var row = rows[i];
			var cell = rows[i].cells[cellIndex];
			if (cell && cell.innerHTML == sData) {
				return cell;
			}
		}
	}
};
var pageCtrl = {
	loadData: function(){
		var table = document.getElementsByTagName('table')[0].tBodies[0];
		var basicDataList = [
			{"title": "볼펜", "price": 500, "count": 12, "category": '1'},
			{"title": "공책", "price": 1000, "count": 30, "category": '2'},
			{"title": "수학참고서", "price": 34000, "count": 1, "category": '2'}
		];
		tableCtrl.insertRow(basicDataList, table);
	},
	addData: function(){
		var category = document.getElementsByName('productCategory')[0].value;
		var name = document.getElementsByName('productName')[0].value;
		var price = document.getElementsByName('productPrice')[0].value;
		var count = document.getElementsByName('productCount')[0].value;
		var datas = [{
			"category": category,
			"title": name,
			"price": price,
			"count": count
		}];
		var table = document.getElementsByTagName('table')[0].tBodies[0];
		tableCtrl.insertRow(datas, table);
	},
	getSum: function(){
		var table = document.getElementsByTagName('table')[0].tBodies[0],
			sum = 0,
			rows = table.rows
		;
		for (var i = 0, l = rows.length; i < l; i++) {
			var cells = rows[i].cells;
			var val = cells[cells.length - 2].innerHTML;
			sum += parseInt(val);
		}
		document.getElementById('totalPrice').innerHTML = sum;
	}
};
